import React, { Component, Fragment } from 'react';
import { Operator, TableMethods } from '@/common/Hoc/data';
import { Button, Card, Divider, Dropdown, Form, Icon, Input, Menu, Popconfirm, Tag } from 'antd';
import StandardTable from './StandardTable';
import { SimpleCurd } from '@/common/Hoc/SimpleCurdHoc';
import { selectPage } from '@/services/users';
import styles from '@/common/styles/table.less';
import classnames from 'classnames';
import UserForm from './form/UserFrom';
import { deleteByIds, deleteById } from '@/services/users';
import { BatchOperator } from '@/common/Hoc/BatchHoc';

const batchOperators: Operator[] = [
  {
    code: 'remove',
    name: '删除',
    method: deleteByIds,
  },
];

const baseMethods: TableMethods = {
  getList: (param: any) => selectPage(param),
  getDelete: (param: any) => deleteById(param),
};

@SimpleCurd(baseMethods)
@BatchOperator(batchOperators)
// @ts-ignore
@Form.create()
export default class CurdTable extends Component<any, any> {
  columns: any[] = [
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '密码',
      dataIndex: 'password',
    },
    {
      title: '姓名',
      dataIndex: 'nickName',
    },
    {
      title: '角色',
      dataIndex: 'role',
      render: (text: any, record: any) => {
        if (record.roles && record.roles.length > 0) {
          return record.roles.map((item: any, index: number) => (
            <Tag key={index} color="#2db7f5">
              {item.roleName}
            </Tag>
          ));
        }
      },
    },
    {
      title: '上一次登录时间',
      dataIndex: 'lastLoginTime',
    },

    {
      title: '操作',
      render: (text: any, record: any) => (
        <Fragment>
          <a
            onClick={() => {
              this.props.handleModalVisible(true, record);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <Popconfirm
            placement="bottom"
            title="确定删除吗?"
            onConfirm={() => {
              this.props.handleDelete(record.id);
            }}
            okText="确定"
            cancelText="取消"
          >
            <a href="">删除</a>
          </Popconfirm>
        </Fragment>
      ),
    },
  ];
  searchColumns = [
    {
      title: '用户名',
      name: 'username',
      content: <Input placeholder="请输入用户名" />,
    },
  ];

  menu = (
    <Menu onClick={() => {}} selectedKeys={[]}>
      <Menu.Item key="remove">删除</Menu.Item>
    </Menu>
  );

  render() {
    const {
      tableChange,
      tableData,
      tableLoading,
      pageTotal,
      modalVisible,
      currentData,
      selectionsChange,
      handleModalVisible,
    } = this.props;

    return (
      <div className="s_r_table_wrapper">
        <Card bordered={false}>
          <div className={classnames(styles.tableList)}>
            <div className={styles.tableListForm}>
              {this.props.renderForm(this.props.form, this.searchColumns)}
            </div>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => handleModalVisible(true)}>
                新建
              </Button>

              <span>
                <Button>批量操作</Button>
                <Dropdown overlay={this.menu}>
                  <Button>
                    更多操作 <Icon type="down" />
                  </Button>
                </Dropdown>
              </span>
            </div>
            <StandardTable
              tableData={tableData}
              pageTotal={pageTotal}
              tableChange={tableChange}
              selectionsChange={selectionsChange}
              columns={this.columns}
              loading={tableLoading}
            />
          </div>
        </Card>
        <UserForm
          modalVisible={modalVisible}
          handleModalVisible={handleModalVisible}
          currentData={currentData}
        />
      </div>
    );
  }
}
